<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">发票信息</div>
                        <div class="right text-blue" @click="CreateHandler()">新增发票信息</div>
                    </div>
                    <div class="enterprise-list">
                        <!-- 发票列表 -->
                        <div v-for="(item,index) in data.data" :key="index" class="enterprise-card">
                            <div class="enterprise-card-head">
                                <div class="hd">{{ item.invoice_rise }}</div>
                                <!-- <div class="state text-blue">{{ item.status }}</div> -->
                            </div>
                            <div class="enterprise-card-cont">
                                <ul>
                                    <li><span>企业税号：</span>{{ item.paragraph }}</li>
                                    <li><span>开户银行：</span>{{ item.bank_name }}</li>
                                    <li><span>联系电话：</span>{{ item.telephone }}</li>
                                    <li><span>银行账户：</span>{{item.bank_card}}</li>
                                    <li><span>单位地址：</span>{{ item.address }}</li>
                                </ul>
                            </div> 
                            <div class="enterprise-card-foot">
                                <div class="checkbox">
                                    <el-checkbox true-label="1" false-label="0" v-model="item.is_default" @change="DefaultChangeHandler($event,item)"></el-checkbox> 设为默认收货地址
                                </div>
                                <div class="btn-group">
                                    <el-button class="btn-edit" @click="EditHanlder(item)">编辑</el-button>
                                    <el-button class="btn-detele" @click="DeleteHanlder(item)" plain>删除</el-button>
                                </div>
                            </div>
                        </div>
                        <Custom-pagination :total="data.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="doLoadData" :hidden="pageHidden"></Custom-pagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>

        <!-- 发票信息修改弹窗 -->
        <el-dialog
            :title="title+'发票信息'"
            :close-on-click-modal="false"
            :visible.sync="dialogEditVisible"
            width="800px"
            top="5%">
            <div class="dialog-content add-enterprise">
                <el-form ref="form" status-icon :model="form" label-width="150px" label-position="left" :show-message="false">
                    <el-form-item label="发票类型" prop="invoice_type" required>
                        <el-select v-model="form.invoice_type" placeholder="请选择发票类型" style="width:280px">
                            <el-option :label="item" :value="item" v-for="(item, index) in invoiceType" :key="index"></el-option>
                            <!-- <el-option label="增值税专用发票" value="2"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="抬头类型" prop="rise_type" required>
                        <el-select v-model="form.rise_type" placeholder="企业" style="width:280px">
                            <el-option 
                                v-for="(item,index) in headers"
                                :key="index"
                                :label="item" 
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发票抬头" prop="invoice_rise" required>
                        <el-input v-model="form.invoice_rise" placeholder="请输入发票抬头"></el-input>
                    </el-form-item>
                    <el-form-item label="企业税号" prop="paragraph" required>
                        <el-input v-model="form.paragraph" placeholder="请输入企业税号"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" prop="bank_name" required>
                        <el-input v-model="form.bank_name" placeholder="请输入开户银行"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号"  prop="bank_card" required>
                        <el-input v-model="form.bank_card" placeholder="请输入银行账号"></el-input>
                    </el-form-item>
                    <el-form-item label="单位地址" prop="address" required>
                        <el-input v-model="form.address" placeholder="请输入单位地址"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="telephone" required>
                        <el-input v-model="form.telephone" placeholder="请输入电话号码"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="checkbox">
                            <el-checkbox true-label="1" false-label="0" v-model="form.is_default"></el-checkbox>设置为默认发票信息
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">保存</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!-- 发票信息修改弹窗 结束 -->
    </div>
</template>

<script>
import Vue from 'vue'
import $ from "jquery"
import api from "@/api/invoice"
import common from "@/api/common"
import { validatePhone } from "@/utils/common";
import CustomPagination from '../../components/CustomPagination.vue';

  export default {
    components: { CustomPagination },
    data() {
        return {
            id:0,// 0默认为新增操作，若不为0则为更新
            dialogEditVisible: false,
            list:[],
            form: {

            },
            headers:[], // 发票抬头
            query: {
                    page: 1,
                    pageSize:5
                },
            data: {
                data: [],
                total: 0
            },
            pageHidden: true,
            title: "新增",
            invoiceType: []
        };
    },
    created(){
        this.doLoadData();
        this.LoadInvoiceType();
    },
    methods: {
        doLoadData:function(){
            let _this = this;
            _this.loading = true
            api.GetInvoiceList(_this.query)
                .then(res => {
                    _this.data = res.data;
                    _this.pageHidden = false;
                    if (this.query.pageSize >= this.data.total) {
                        this.pageHidden = true;
                    }
                    _this.loading = false
                });
        },
        // 创建发票信息
        CreateHandler:function(){
            let _this = this;
            _this.title="新增"
            // 新增
            _this.form = {
            }; // 默认清空数据
            _this.dialogEditVisible = true // 打开弹窗
            if(_this.$refs.form){
                _this.$refs.form.resetFields();
            }
            // 初始化下拉数据
            _this.InitDropData()
        },
        InitDropData:function(){
            let _this = this
            return Promise.all([
                _this.InitDropHeaders()
                ]).then(res => {
                    console.log("所有异步调用完成")
                })
        },
        //抬头类型
        InitDropHeaders:function(){
            let _this = this;
            return new Promise((resolve, reject) => {
                api.GetInvoiceHeader()
                .then(res => {
                    _this.headers = res.data;
                    resolve();
                });
            });
        },
        // 加载类型
        LoadInvoiceType: function () {
            let _this = this;
            api.GetInvoiceType()
                .then((res) => {
                    _this.invoiceType = res.data;
                })
        },
        EditHanlder:function(item){
            // 拿到可编辑的编号
            let _this = this;
            _this.title = "编辑"
            // 新增
            this.form = {
            }; // 默认清空数据
            this.id = item.id // 编辑的时候获取id
            let input = {
                id:item.id
            }
            _this.InitDropData().then(res =>{
                api.GetInvoiceInfo(input)
                .then(resp=>{
                    // 根据详情需要重新初始化一次数据
                    // 拿到数据_this.EditInitProvinces(res.data)
                    console.log("结果为：",res)
                    Vue.set(_this, 'form', resp.data)
                    _this.addLoading = false;
                    _this.dialogEditVisible = true;
                });
            })
        },
        // 设置默认收货地址
        DefaultChangeHandler:function(e,item){
            let _this = this
            let input = {
                id:item.id,
                is_default:e
            }
            // 设置默认收货地址
            api.SetDefault(input)
                .then((res) =>{
                _this.doLoadData()    
            })
        },
        // 删除收货地址
        DeleteHanlder:function(item){
            let _this = this
            this.$confirm('是否删除发票信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let input = {
                id:item.id
                }
                // 设置默认收货地址
                api.Delete(input)
                    .then((res) =>{
                    _this.doLoadData()    
                })
            })
        },
        onSubmit(){
            let _this = this
            // 提交之前验证一下
            _this.addLoading = true;
            _this.$refs.form.validate((valid) => {

            if (valid) {
                if (!validatePhone(_this.form.telephone)) {
                    this.$message.error("请输入正确的手机号");
                    _this.addLoading = false;
                    return;
                }

                _this.form.id = _this.id
                api.CreateOrUpdate(_this.form)
                    .then((res) =>{
                        _this.$message.success("提交成功");
                        _this.addLoading = false;
                        _this.dialogEditVisible = false;
                        //this.$refs.form.resetFields();
                        _this.id = 0 // 重置为新增
                        _this.doLoadData();

                }).catch((err) => {
                        _this.$message.error("提交失败");
                        _this.addLoading = false;
                })
            } else {
                _this.addLoading = false;
            }
            })       
            
        }
    },
    mounted: function(){
        
    }

  };
</script>
<style>



</style>